<template>
	<div class="main">
		<div class="main-header" v-if="buttons.length">
			<el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
				v-show="item.name != 'hidden'" :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{
					item.title }}</el-button>
		</div>
		<el-table :data="list" border header-cell-class-name="main-table-header" ref="table" class="main-table"
			height="100%" row-key="id" default-expand-all @selection-change="onSelectionChange" @row-click="onRowClick">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column label="模版ID" prop="id" width="200"></el-table-column>
			<el-table-column label="模版名称" prop="name"></el-table-column>
			<el-table-column label="模版图标">
				<template slot-scope="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="fill"></el-image>
				</template>
			</el-table-column>
			<el-table-column>
				<template slot-scope="scope">
					<el-button type="primary" @click.stop="goRules(scope.row.id)"
						v-show="$getRouteAuth('/templateoption').get('visit')">查看表单配置</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- <el-pagination
			class="main-pagination"
			:current-page.sync="page"
			:page-size="limit"
			:total="total"
			@current-change="onCurrentChange"
			layout="total,jumper,prev,pager,next"
		></el-pagination> -->
		<add-template v-model="addShow" :editRows="editRows" @close="editRows = []" @update="getList"></add-template>
	</div>
</template>
<script>
import addTemplate from "./add.vue";
export default {
	data() {
		return {
			addShow: false,
			list: [],
			editRows: [],
			selection: [],
			total: 0,
			limit: 20,
			page: 1,
		};
	},
	components: {
		addTemplate,
	},
	computed: {
		buttons() {
			return this.$store.state.buttons;
		},
	},
	created() {
		this.getList();
	},
	methods: {
		async getList() {
			try {
				let res = await this.$get({
					url: "/admin/formoption.FormOptionCate/index",
					loading: true,
				});
				this.total = res.total;
				this.list = res.list;
			} catch (err) {
				this.$message.error(err);
			}
		},
		async deleteTemplate() {
			this.$confirm(
				`此操作将永久删除该${this.selection.length}个项目, 是否继续?`,
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}
			).then(async () => {
				let query = "?";
				for (let i = 0; i < this.selection.length; i++) {
					const item = this.selection[i];
					if (i > 0) {
						query += "&ids[]=" + item.id;
					} else {
						query += "ids[]=" + item.id;
					}
				}
				await this.$del({
					url: '/admin/formoption.FormOptionCate/del' + query,
					loading: true,
					successTip: true,
				})
				this.getList();
			})
			.catch(() => {
				this.$refs.table.clearSelection();
			});

		},
		goRules(id) {
			this.$router.push('/templateoption?id=' + id)
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
			// this.$refs.info.show();
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		onCurrentChange(index) {
			this.page = index;
			this.getList()
		},
		hasRule() {
			let has = this.buttons.find(item => item.path == 'rule')
			return has ? true : false
		},
		tapButton(e) {
			switch (e.path) {
				case "add":
					this.addShow = true;
					break;
				case "delete":
					this.deleteTemplate()
					break;
				case "edit":
					this.editRows = JSON.parse(JSON.stringify(this.selection))
					this.editRows.forEach((item) => {
						item.img = [{
							url: item.img,
							uid: Math.random().toFixed(10)
						}]
					})
					break;
				default:
					console.log("1");
					break;
			}
		},
	},
};
</script>
<style lang="less"></style>
